import React, { Component } from 'react';
import moment from 'moment';
import { Popover, Button, Select, DatePicker, message } from 'antd';
import styles from './index.less';
import * as apis from '@/services/SystemMgr';
import AuthorizedButton from '@/components/AuthorizedButton';

const { Option } = Select;
export default class MyPopover extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      deleteSysValue: '',
      beginTime: '',
    };
  }

  hide = () => {
    this.setState({
      visible: false,
    });
  };

  handleVisibleChange = visible => {
    this.setState({ visible });
  };

  // 获取编辑的系统值
  handleGetSyssChange = value => {
    this.setState({ deleteSysValue: value });
  };

  // 获取编辑的时间值
  handleGetDateChange = (date, dateString) => {
    this.setState({ beginTime: dateString });
  };

  // 点击编辑确定后
  handleOkClick = async recordID => {
    const { deleteSysValue, beginTime } = this.state;
    const dictCode =
      this.getDictCode(this.props.record.FetchNumbe) !== '请选择'
        ? this.getDictCode(this.props.record.FetchNumbe)
        : '';
    const params = {
      countingSystemId: deleteSysValue || dictCode,
      // effectiveDateStr: beginTime || this.props.record.time,
      effectiveDateStr: '',
      id: recordID,
    };
    if (params.countingSystemId !== '') {
      this.setState({
        visible: false,
      });
      const data = await apis.updateSysProjectFetchNumberUsingPUT({ data: params });
      if (data.code && data.code === 1) {
        message.success('编辑成功,已更新至第一条！');
        this.props.upDate();
      }
    } else {
      message.warning('请选择取数系统');
    }
  };

  // dict_code
  getDictCode = dictName => {
    let dictCode;
    if (dictName === 'NOS系统') {
      dictCode = 'nos';
    } else if (dictName === '明源系统') {
      dictCode = 'my';
    } else {
      dictCode = '请选择';
    }
    return dictCode;
  };

  render() {
    const { systemData, recordID, record } = this.props;
    return (
      <Popover
        placement="left"
        content={
          <div className={styles.popoverContent}>
            <div>
              <span>取数系统：</span>
              <Select
                showSearch
                style={{ width: 195, height: 32 }}
                defaultValue={this.getDictCode(record.FetchNumbe)}
                optionFilterProp="children"
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                onChange={value => this.handleGetSyssChange(value)}
              >
                {systemData.map(options => (
                  <Option value={options.dict_value} key={options.dict_value}>
                    {options.dict_name}
                  </Option>
                ))}
              </Select>
            </div>
            {/* <div>
              <span>生效日期：</span>
              <DatePicker
                width={160}
                showTime
                defaultValue={moment(record.time)}
                onChange={(date, dateString) => this.handleGetDateChange(date, dateString)}
              />
            </div> */}
            <div>
              <Button type="primary" onClick={() => this.handleOkClick(recordID)}>
                确定
              </Button>
              <Button onClick={this.hide}>取消</Button>
            </div>
          </div>
        }
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange}
      >
        <AuthorizedButton authority="systemConfig_Config_projectNum_edit">
          <Button type="link" onClick={() => this.setState({ visible: true })}>
            编辑
          </Button>
        </AuthorizedButton>
      </Popover>
    );
  }
}
